<!-- 地域分布 -->
<template>
  <div>
    <div style="display: flex">
      <mapChart ref="mapChart" v-loading="loading" :chart-data="mapChartData" height="300px" @clickHandel="clickHandel" />
      <barLineChart ref="barChart" height="300px" :chart-data="chartData" @clickHandel="clickHandel" />
    </div>
    <div class="list-table mt20">
      <div class="area-header">
        <indirectProjectSummary ref="indirectProjectSummary" />
      </div>
    </div>
  </div>
</template>

<script>
import mapChart from '@/views/chart/mapChart'
import barLineChart from '@/views/chart/barLineChart.vue'
import indirectProjectSummary from '@/views/deal/bf/indirectProjectAnalysis/indirectProjectSummary.vue'
import { getAreaMap } from '@/api/bf/indirectProjectAnalysis/indirectProjectSummary'
export default {
  components: {
    mapChart,
    barLineChart,
    indirectProjectSummary
  },
  data() {
    return {
      chartData: {
        datas: []
      },
      mapChartData: [],
      mapChart: true,
      loading: false,
      listShow: false,
      currentArea: undefined
    }
  },
  mounted() {
    this.loading = true
    // 地图加载数据
    getAreaMap().then(response => {
      this.loading = false
      var rows = response.data || []
      this.mapChartData = JSON.parse(JSON.stringify(rows))
      if (rows.length > 0) {
        this.chartData.xLabel = rows.map(el => el.areaName)
        this.chartData.legend = false
        this.chartData.seriesLabelShow = true
        this.chartData.barWidth = 20
        this.chartData.datas = [
          {
            type: 'bar',
            name: this.$t('投资金额') + this.$t('金额单位'),
            data: rows.map(ele => { return { value: ele.count, name: ele.areaName, areaId: ele.areaId, amount: ele.amount } })
          }
        ]
      }
    })
    // [{ 'areaId': 2, 'areaName': '北京', 'code': 110000, 'amount': 5663, 'count': 3 }]
    this.clickHandel('notNull')
  },
  methods: {
    // 地图
    clickHandel(val) {
      this.$nextTick(() => {
        if (this.currentArea === val.areaId) {
          this.currentArea = 'notNull'
        } else {
          this.currentArea = val.areaId
        }
        this.$refs.indirectProjectSummary.parentQueryParams.provinceRegistered = this.currentArea
        this.$refs.indirectProjectSummary.getList()
      })
    }
  }
}
</script>

<style scoped>

</style>
